<template>
    <div class="search">
        <van-search @input='inputFn()' v-model='value' shape="round" placeholder="请输入搜索关键词" />
        <!-- 热门搜索 -->
        <div v-if="resultList.length === 0">
            <p>热门搜索</p>
            <div class="search_warp">
                <div class="hot_name_wrap">
                    <span @click='fn(item.first)'  class="hot_item" v-for="(item, i) in hotList" :key="i">{{item.first}}</span>
                </div>
            </div>
        </div>
        <!-- 最佳匹配 -->
        <div v-else>
            <p>最佳匹配</p>
            <!-- 加载更多 最佳匹配内容 -->
            <!-- List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
            此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。 -->
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                <song-item v-for="(item, i) in resultList" :key='i' :title='item.name'
                    :label="item.artists[0].name + item.name" :id='item.id'></song-item>
            </van-list> 
        </div> 
        
    </div>
</template>

<script>
import {hotSearchAPI, searchResultAPI} from '@/api'
import songItem from '@/components/songItem.vue'
    export default {
  components: { songItem },
        data() {
            return {
                hotList: [],    // 热门搜词数据
                value: '',      // 输入框值
                resultList: [], // 最佳匹配结果
                timer: null,     // 计时器
                loading: false,
                finished: false,
                page:1
            }
        },
        created(){
                this.getHotSearch() 
            },
        methods:{
            // 加载更多 最佳匹配内容
            async onLoad(){
                this.page++
                console.log(this.page)
                let res = await this.getSearchResult()
                this.resultList = [...this.resultList, ...res.data.result.songs]     // 扩展运算符 合并数据
                this.loading = false        // 当本页加载完后 还能继续加载
            },
            // 当搜索框 清空时 显示热门搜词
            inputFn(){
                if(this.timer) clearTimeout(this.timer)
                // 防抖
                this.timer = setTimeout(async () => {       // async
                    // page从第一页获取
                    this.page = 1
                    // +3 输入关键词改变  ---可能有新数据
                    this.finished = false
                    if(this.value === ''){
                        this.resultList = []
                        return
                    }
                    // 根据输入框内容请求搜索结果
                    // 搜索结果列表
                    let res = await this.getSearchResult()
                    if (res.data.result.songs === undefined) {
                        this.resultList = []
                        return
                    }
                    this.resultList = res.data.result.songs
                    this.loading = false
                }, 500);
                
            },
            // 点击热门搜词 执行 最佳匹配
            async fn(first){
                this.finished = false
                this.value = first
                let res = await this.getSearchResult()
                this.resultList = res.data.result.songs
                this.loading = false
            },
            // 热门搜索数据
            async getHotSearch(){
                let res = await hotSearchAPI()
                // console.log(res.data.result.hots)
                this.hotList = res.data.result.hots
            },
            // 最佳匹配 数据
            async getSearchResult(){
                let res = await searchResultAPI({
                    keywords : this.value,
                    limit: 20,
                    page:1
                    
                })
                // console.log(res.data.result.songs)
                return res
            }
        }
    }
</script>

<style scoped>
.search{
    padding-bottom: 50px;
}
.search_wrap {
  padding: 5px;
}
.hot_title {
  font-size: 14px;
  color: #666;
}
.hot_name_wrap {
  margin: 5px;
}

.hot_item{
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 8px;
    font-size: 14px;
    color: #666;
    border-radius: 20px;
    border: 1px solid #666;
}
</style>